<template>
<section>
    <div class="banner">
      <div class="container">
        <div class="row">
          <h1 class="banner_title">Shop Cart</h1>
          <div class="breadcrumb">
            <ul>
              <li><a href="index.html">Home</a></li>
              <li><i class="fa fa-angle-right" aria-hidden="true"></i></li>
              <li><a href="shop.html">Shop</a></li>
              <li><i class="fa fa-angle-right" aria-hidden="true"></i></li>
              <li class="active"><a href="shop-cart.html">Order</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <!--================ Our banner Section end =================-->
    <section class="pad95-100-top-bottom shop-card-1">
      <div class="container">
        <h3 class="main hdi">订单页面</h3>
        <!--=========Cart Table start============-->
        <div class="cart-table">
          <ul class="cart-table-top">
            <li class="cart-wdt1">
              商品
            </li>
            <li class="cart-wdt2">
              价格
            </li>
            <li class="cart-wdt2">
              数量
            </li>
            <li class="cart-wdt2">
              总额
            </li>
          </ul>
          <ul class="cart-table-top cart-table-mid" v-for="(v,i) in goods_info" :key='i'>
            <li class="cart-wdt1">
              <span class="cartproduct-img"><img :src="v.goods_img" alt="cart-image"></span>
              <div class="cartproduct-desc">
                <p>{{v.goods_name}}</p>
              </div>
            </li>
            <li class="cart-wdt2 margin-txt">
              <span class="prdt-price ">￥{{v.goods_price}}</span>
            </li>
            <li class="cart-wdt2 margin-txt">
              <span class="prdt-price ">{{v.goods_num}}</span>
            </li>
            <li class="cart-wdt2 margin-txt">
              <span class="prdt-price">￥{{v.total_prices}}</span>
            </li>
          </ul>
        </div>
        <!--=========Cart Table end============-->

        
        <!--=========Your Order start============-->
        
          </div>
      <div class="container">
        <h3 class="main hdi">用户订单信息</h3>
        <h3 style="font-size: large;font-weight: 500;">添加用户信息</h3>
        <ul class="cart-table-top cart-table-mid">
          <li class="c1">
            姓名:
            <input class="cart-prdt-qty" v-model="userinfo.name">
          </li>
          <li class="c2">
            手机号：
            <input class="cart-prdt-qty1" v-model="userinfo.phone">
          </li>
          <li class="c3">
            地址：
            <input class="cart-prdt-qty3" v-model="userinfo.addr">
          </li>
          <li class="c4"><span type="button" @click="adduserinfo()">添加</span></li>
        </ul>
         
        <!--=========Cart Table start============-->
        <div class="cart-table">
          <ul class="cart-table-top">
            <li class="cart-wdt2">
              姓名
            </li>
            <li class="cart-wdt2">
              手机号码
            </li>
            <li class="cart2">
              地址
            </li>
          </ul>
          <ul class="cart-table-top cart-table-mid" v-for="(v,i) in users_info" :key='i'>
            <li class="cart-wdt2 margin-txt">
              <span class="prdt-price ">{{v.user_name}}</span>
            </li>
            <li class="cart-wdt2 margin-txt">
              <span class="prdt-price ">{{v.user_phone}}</span>
            </li>
            <li class="cart2 margin-txt">
              <span class="prdt-price">{{v.user_addr}}</span>
            </li>
            <li class="cart-wdt margin-txt">
              <label><input type="checkbox"></label>
            </li>
          </ul>
          <ul class="cart-table-top cart-table-btm">
            <li class="pull-right">
              <div class="btn-123">
                <div class="sim-button button8">
                  <span @click="check_out()">结算</span>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <!--=========Cart Table end============-->
    
        
        <!--=========Your Order start============-->
        
          </div>
    </section>
    
 
 </section>
</template>

<script>
  import {querygoods,queryusers,adduserinfo} from "@/api/order.js"
  import {getUserId} from "@/libs/util.js"
  
  export default {
    data() {
      return {
        goods_info:[],
        users_info:[],
        user_id: getUserId(),
        userinfo: {
          name: '',
          phone: '',
          addr: '',
          user_id: getUserId()
        }
      }
    },
    methods:{
      querygoods(){
        querygoods(this.user_id)
        .then(
        res => {
          console.log(res.data)
          if(res.data.status_code==10000){
            this.goods_info = res.data.data
            console.log(this.goods_info)
          }else{
            console.log(res.data.data)
          }
        }).catch(
          err => {
            console.log("出错了")
            console.log(err)
          }
        )
      },
      queryusers(){
        queryusers(this.user_id)
        .then(
        res => {
          console.log(res.data)
          if(res.data.status_code==10000){
            this.users_info = res.data.data
          }else{
            console.log(res.data.data)
          }
        }).catch(
          err => {
            console.log("出错了")
            console.log(err)
          }
        )
      },
      adduserinfo(){
        adduserinfo(this.userinfo).then(
          res => {
            if(res.data.status_code==10000){
              this.users_info.push({user_name: this.userinfo.name,user_phone: this.userinfo.phone,user_addr: this.userinfo.addr,user_profile_id: this.userinfo.user_id})
            }
          }
        )
      },
      check_out(){
        alert("支付功能未能完成！")
      }
    },
    mounted(){
       this.querygoods();
       this.queryusers();
    }
  }
</script>

<style>
  .cart-wdt1 {
    width: 30%;
    float: left;
    text-align: left !important;
  }
  .cart1 {
    width: 50%;
    float: left;
    text-align: left !important;
  }  
  .cart-wdt2 {
    width: 20%;
    float: left;
    text-align: center;
  }
  .cart2 {
    width: 50%;
    float: left;
    text-align: center;
  }
  .c1 {
    width: 15%;
    float: left;
  }
  .c2 {
    width: 25%;
    float: left;
  }
  .c3 {
    width: 50%;
    float: left;
  }
  .c4 {
    width: 10%;
    float: left;
  }
  .cart-wdt {
    width: 8%;
    float: left;
    text-align: center;
  }
  .cart-wdt3 {
    width: 30%;
    float: left;
    text-align: center;
  }
  .cart-prdt-qty {
    width: 70px;
    height: 30px;
    text-align: center;
  }
  .cart-prdt-qty1 {
    width: 150px;
    height: 30px;
    text-align: center;
  }
  .cart-prdt-qty3 {
    width: 350px;
    height: 30px;
    text-align: center;
  }
</style>
